<template>
  <div class="content">
          <div class="categoryWrap">
             <span>日期 : </span>
             <el-date-picker 
                v-model="value1"
                type="year"
                placeholder="选择年份"
               >
             </el-date-picker>
          </div>
          <div class="tables">
               <ul class="head_ul">
                   <li>月份</li>
                   <li>工资</li>
                   <li>福利费</li>
                   <li>差旅费</li>
                   <li>资金</li>
                   <li>办公费</li>
                   <li>招待费</li>
                   <li>折旧费</li>
                   <li>水电费</li>
                   <li>电话费</li>
                   <li>修理费</li>
                   <li>其他</li>
                   <li>社保费</li>
                   <li>印花费</li>
                   <li>运费</li>
                   <li>公共费用</li>
                   <li>合计</li>
               </ul>
               <ul class="common list_ul" v-for=" list in list" :key="list">
                    <li >{{list.name}}</li>
                   <li v-for=" ele in 16" :key="ele"></li>
               </ul>
          </div>
  </div>
</template>

<script>
  export default {
    data () {
       return{
           list:[
            {name:'1月'},
            {name:'2月'},
            {name:'3月'},
            {name:'4月'},
            {name:'5月'},
            {name:'6月'},
            {name:'合计'},
            {name:'累计占比'},
            ]
       }
    },
    methods: {
       
    },

  }

</script>
<style lang='scss' scoped>
.content{
   min-height: calc(100vh - 130px);
   background: #fff;
   padding: 30px;
   border-radius: 10px;
   .categoryWrap{
       span{
         margin-right: 30px;
       }
    }
   .tables{
       margin: 30px 0;
       width: 100%;
       overflow-x: scroll;
       ul{
           height: 50px;
           line-height: 50px;
           margin: 0;
           padding: 0;
           display: flex;
           list-style: none;
           li{
               min-width: 180px;
               height: 50px;
               text-align: center;
               border-top: 1px solid #EBEEF5 ;
               border-left: 1px solid #EBEEF5 ;
               color: #909399;
               font-size: 14px;
           } 
       }
       .head_ul{
           li{
               background-color: #f5f6f8;
           }
       }
       .list_ul{
           li{
               color: #606266;
           }
       }
   }
}
</style>